<template>
  <div class="information">
    <!-- 头部 -->
    <van-nav-bar
      title="会员资料"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 内容 -->
    <main>
      <van-cell title="头像" is-link @click="imginfo(infolist.avatarImg)" />
      <van-cell title="帐号" is-link value="xcx_kuqypykrkldvqvdr " />
      <van-cell title="姓名" is-link :value="infolist.nickName" />
      <van-cell title="手机" is-link value="未填写 " />
      <van-cell title="性别" is-link :value="infolist.sex" />
      <van-cell
        title="地址管理"
        is-link
        style="margin: 20px 0"
        @click="intoadd"
      />
      <van-cell title="修改个人信息" is-link @click="changeInfo" />
      <van-cell title="绑定其他账号" is-link style="margin-bottom: 10px" />
      <van-button type="default" style="width: 100%">退出当前账号</van-button>
    </main>
  </div>
</template>

<script>
import { userInfoApi } from "../utils/api";
export default {
  data() {
    return {
      infolist: {},
    };
  },
  mounted() {
    let token = localStorage.getItem("token");
    console.log(token);
    userInfoApi(token).then((res) => {
      this.infolist = res.result;
      console.log(this.infolist);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    imginfo(imgurl) {
      console.log(imgurl);
      this.$router.push("/imgurl");
    },
    intoadd() {
      this.$router.push("/userAddress");
    },
    changeInfo(){
      this.$router.push("/changeinfor");
    }
  },
};
</script>

<style scoped>
.van-nav-bar .van-icon {
  color: #000;
}
.van-cell {
  color: #000;
}
/* 标题 */
.information /deep/ .van-ellipsis {
  font-size: 18px;
  font-weight: 700;
}
/* 返回箭头 */

.information /deep/ .van-icon-arrow-left {
  color: black;
  font-size: 24px;
  font-weight: 700;
}
.information /deep/ .van-cell__title{
  text-align: left;
  font-size: 14px;
  line-height: 30px;
}
main{
  background: rgba(223, 222, 222,.2);
}
.information /deep/ .van-button{
  font-size: 17px;
  line-height: 60px;
  height: 60px;
}
</style>
